<script setup>
import { ref } from 'vue'
import { getPolicy, deletePicture } from '@/apis/policy.js'
import { nanoid } from 'nanoid'
import { Delete,  Plus, ZoomIn } from '@element-plus/icons-vue'


// 凭证变量
const policyObj = ref({});
const gatUploadParams = async(file)=>{
  const res =  await getPolicy();
  policyObj.value = res.data;
  policyObj.value.key = policyObj.value.dir + props.uploadType + "/" + nanoid() + file.name;
  return policyObj.value;
}

const props = defineProps({
  picture:{
    type:String,
  },
  uploadType:{
    type:String
  },
  width:{
    type:Number,
    default: 180,
  },
  height:{
    type:Number,
    default: 180,
  },
})

const emits = defineEmits(['update:picture'])

// 文件上传成功
const handlePictureSuccess =(res,file) =>{
  ElMessage({
    message: '上传成功',
    type: 'success',
  })
  emits('update:picture',policyObj.value.host + '/' + policyObj.value.key);
}

//删除单个图片
const handleRemove = async() =>{
  const imgName = props.picture.split("/").slice(3).join("/");
  await deletePicture(imgName)
  emits('update:picture','');
}

// 导出删除方法
defineExpose({
  handleRemove,
})

// 查看大图
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handlePreview = () => {
  dialogImageUrl.value = props.picture;
  dialogVisible.value = true;
}

</script>
<template>
  <div class="container_upload" :style="{ width:width + 'px', height: height + 'px' }">
    <el-upload
      class="content_upload"
      action="http://pet-supplies-oss.oss-cn-beijing.aliyuncs.com"
      :data="gatUploadParams"
      :show-file-list="false"
      :multiple="false"
      :on-success="handlePictureSuccess"
    >
    <div class="upload_button_img" :style="{ width:width + 'px', height: height + 'px' }">
      <img v-if="picture" :src="picture" alt=""/>
      <el-icon v-else><Plus /></el-icon>
    </div>
    </el-upload>

    <div v-if="picture" class="overlay_upload">
      <div class="overlay-content">
        <div class="overlay-buttons" @click="handlePreview"><ZoomIn/></div>
        <div class="overlay-buttons" style="margin-left:20%;" @click="handleRemove"><Delete/></div>
      </div>
    </div>
  </div>


  <el-dialog v-model="dialogVisible" center width="50%">
    <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%;height: 100%;"/>
  </el-dialog>

</template>

<style lang="scss" scoped>
    .container_upload {
      position: relative;
      border-radius: 5%;
    }
    
    .content_upload {
      width: 100%;
      height: 100%;
    }

    .upload_button_img{
      justify-content: center;
      align-items: center; 
      display: flex;
      border: 1px dashed rgba(119, 119, 119, 0.548);
      border-radius: 5%;
    }

    .upload_button_img img{
      border-radius: 5%;
      height:100%;
      width:100%;
    }
    
    .overlay_upload {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0);
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      z-index: 9999;
      border-radius: 5%;
    }
    
    .container_upload:hover .overlay_upload {
      background-color: rgba(31, 31, 31, 0.548);
      opacity: 0.7;
    }

    .overlay-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height:100%;
      border-radius: 5%;
    }

    .overlay-buttons{
      color: aliceblue;
      height:20%;
      width:20%;
      cursor: pointer;
    }
</style>
